<script setup lang="ts">
import { ArrowForward, At } from '@vicons/ionicons5'
import { ref } from 'vue'

const value1 = ref('hello')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const handleInput = (value: string) => {
  console.log(value)
}

const handleChange = (value: string) => {
  console.log(value)
}
const handleFocus = (e: FocusEvent) => {
  console.log('focus', e)
}
const handleBlur = (e: FocusEvent) => {
  console.log('blur', e)
}
</script>

<template>
  <p>输入框</p>
  <EsInput
    v-model="value1"
    xxx="xxx"
    placeholder="placeholder"
    @input="handleInput"
    @change="handleChange"
    @focus="handleFocus"
    @blur="handleBlur"
  ></EsInput>
  <p>密码输入框</p>
  <EsInput v-model="value2" :show-password="true"></EsInput>
  <p>清空输入框</p>
  <EsInput v-model="value3" :clearable="true"></EsInput>
  <p>复合型输入框</p>
  <EsInput v-model="value4">
    <template #prepend>前缀</template>
    <template #prefixIcon>
      <EsIcon><ArrowForward /></EsIcon>
    </template>
    <template #suffixIcon>
      <EsIcon><At /></EsIcon>
    </template>
    <template #append>后缀</template>
  </EsInput>
</template>

<style scoped lang="scss"></style>
